<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="includes.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<% String basePath = request.getContextPath();%>
<% String baseCSSPath = request.getContextPath()+"/resources/css";%>
<% String baseJSPath = request.getContextPath()+"/resources/js";%>
<% String baseImagePath = request.getContextPath()+"/resources/images";%>

<title>Register Account</title>

<link href="<%=baseImagePath%>/favicon.png" rel="icon">
<link href="<%=baseCSSPath%>/stylesheet.css" rel="stylesheet" type="text/css" >
<script src="<%=baseJSPath %>/jquery-1.js" type="text/javascript" ></script>
<script src="<%=baseJSPath %>/jquery.validate.min.js" type="text/javascript" ></script>
<script src="<%=baseJSPath %>/jquery.validate.message.js" type="text/javascript" ></script>

<script language="javascript">

$(document).ready(function() {
	
	$("#registerSubmitButton").click(function() {
		$("#register").submit();
	});
	
	
	jQuery.validator.addMethod("checkUserNameAvailability", function(value, element, params) { 
	    var validator = this;
	    var username = $('#username').val();
	    var result = false;
	    
	    $.ajax({
	 	   type: "POST",
	 	   url: "<%=basePath%>/account/checkUserNameAvailability.html",
	 	   data: "username=" + username,
	 	   async: false, 
	 	   success: function(response){
	 		   
	 	       if (response == 'true'){ 
	 	    	   result = true;
	 	        }
	 	   },
	 	   error: function(e){
	 		   //console.debug(e);
	 	  		alert('Error: ' + e);
	 	   }
	    });
	    return result;
	}, 'Username has been taken');

	
	$("#register").validate({
		rules: {
			  username: { 
                required: true,
                checkUserNameAvailability: true
          	  },
	          password: { 
	                required: true, minlength: 6
	          }, 
	          conformPassword: { 
	                required: true, equalTo: "#password", minlength: 6
	          }
		}
	});

	
});



// function doAjaxPost() {
//    var username = $('#username').val();
//    $.ajax({
// 	   type: "POST",
// 	   url: "/account/checkUserNameAvailability.html",
// 	   data: "username=" + name,
// 	   success: function(response){
// 	       alert(response);
// 		   $('#info').html(response);
// 		   $('#name').val('');
// 		   $('#education').val('');
// 	   },
// 	   error: function(e){
// 	  		alert('Error: ' + e);
// 	   }
//    });
// }

</script>

</head>
<body class="account-register">
	<div class="main-shining">
		
<p style="display: none;" id="back-top"> <a href="#top"><span></span></a> </p>
<div class="row-1">
   	<%@ include file="header.jsp" %>
   </div>
<div id="container">
<div id="notification"> </div>
<div id="column-left">
	<%@ include file="navMenu.jsp" %>
</div>   
 
<div id="content">  
 
  <h1>Congratulation, you have registered successfully</h1>
  
  <div class="box-container">
  <p>Go back to  <a href="<%=basePath %>/home.html">home page</a>.</p>
       
  </div>
  </div>
    
 
</div>
<div class="footer-wrap">
 	<%@ include file="footer.jsp" %>
</div>
 
</div>

</body></html>